<template>
  <div class="UserManageList">
    <el-row style="text-align: left; margin-bottom: 10px">
      <el-button size="small" type="primary" @click="AddUser()"
        >新增用户</el-button
      >
    </el-row>
    <el-row>
      <el-table
        border
        size="small"
        style="width: 100%"
        height="calc(100vh - 270px)"
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
      >
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="sex" label="性别"> </el-table-column>
        <el-table-column prop="birthday" label="生日">
          <!-- filter过滤器 转化utc时间格式 -->
          <template slot-scope="scope">
            {{ scope.row.birthday | formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.enable"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="启用"
              inactive-text="禁用"
              @change="changeswitch(scope.row.id, scope.row.enable)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleregister(scope.$index, scope.row)"
              >注册</el-button
            >
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="tableData.length"
        v-if="ifShowPagination"
      >
      </el-pagination>
    </el-row>
    <el-dialog title="" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="120px">
        <el-row>
          <el-col :span="22">
            <el-form-item label="" style="text-align: center">
              <el-avatar
                src="https://blogimage-1255495010.cos.ap-beijing.myqcloud.com/202210111546361.jpg"
                :size="80"
              ></el-avatar>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="姓名：">
              <el-input v-model="form.name" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="性别：" style="text-align: left">
              <el-radio-group v-model="form.sex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="生日：">
              <el-date-picker
                size="small"
                type="date"
                placeholder="选择日期"
                v-model="form.birthday"
                style="width: 100%"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="民族：" style="text-align: left">
              <template>
                <el-select
                  v-model="form.nation"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="手机：">
              <el-input v-model="form.phone" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="邮箱：">
              <el-input v-model="form.email" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="政治面貌：">
              <el-input v-model="form.politicaloutlook" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="求职意向">
              <el-input v-model="form.jobintention" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="启用：" style="text-align: left">
              <el-switch v-model="form.enable"></el-switch
            ></el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button size="small" type="primary" @click="GetFormData()"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog title="" :visible.sync="dialogFormRegister">
      <el-form ref="form" :model="form" label-width="120px">
        <el-row>
          <el-col :span="22">
            <el-form-item label="" style="text-align: center">
              <el-avatar
                src="https://blogimage-1255495010.cos.ap-beijing.myqcloud.com/202210111546361.jpg"
                :size="80"
              ></el-avatar>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="姓名：">
              <el-input v-model="form.name" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="性别：" style="text-align: left">
              <el-radio-group v-model="form.sex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormRegister = false"
          >取 消</el-button
        >
        <el-button size="small" type="primary" @click="GetFormData()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'UserManageList',
  data () {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      ifShowPagination: false,
      isAdd: false,
      dialogFormVisible: false,
      dialogFormRegister: false,
      form: {
        ID: '',
        name: '',
        sex: '',
        birthday: '',
        nation: '',
        phone: '',
        email: '',
        politicaloutlook: '',
        jobintention: '',
        enable: false
      },
      formRegister: {
        password: ''
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }]
    }
  },
  methods: {
    AddUser () {
      console.log('AddUser')
      this.dialogFormVisible = true
    },
    GetFormData () {
      console.log(this.form)
      this.service
        .post('/api/UsersDict/Add', this.form)
        .then((res) => {
          if (res.status === 200) {
            this.drawer = false
            this.$message({
              type: 'success',
              message: '添加成功!'
            })
            this.GetTableData()
          }
        })
    },
    GetTableData () {
      this.service
        .get('/api/UsersDict/Get')
        .then((res) => {
          console.log(res)
          this.tableData = res.data
          if (this.tableData.length > this.pageSize) {
            this.ifShowPagination = true
          } else {
            this.ifShowPagination = false
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    changeswitch (objId, rowEnable) {
      console.log(objId)
      console.log(rowEnable)
      this.service.put('/api/UsersDict/UpdateStatus?ObjID=' + objId + '&Status=' + rowEnable + '')
        .then((res) => {
          console.log(res)
        })
    },
    handleCurrentChange (val) {
      this.currentPage = val
    },
    handleSizeChange (val) {
      this.pageSize = val
    },
    handleEdit (index, row) {
      this.dialogFormVisible = true
      this.form = row
      this.isAdd = false
    },
    handleregister (index, row) {

    },
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除该用户【' + row.name + '】, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.service.delete('/api/UsersDict/Delete?ID=' + row.id)
          .then((res) => {
            if (res.status === 200) {
              this.GetTableData()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            } else {
              this.$message({
                type: 'success',
                message: '删除失败!'
              })
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  created () {
    this.GetTableData()
  }
}
</script>
<style scoped lang="scss">
.UserManageList {
  padding-top: 20px;
}
</style>
